<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GlobalOrg Navigator - 国际组织智能助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0E2E91',
                        accent: '#36BFFA',
                        neutral: '#F5F7FA',
                        dark: '#1D2129'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-globe text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">GlobalOrg Navigator</h1>
            </div>
            <nav class="hidden md:flex items-center space-x-6">
                <a href="#features" class="text-gray-600 hover:text-primary transition-colors">功能</a>
                <a href="#tools" class="text-gray-600 hover:text-primary transition-colors">工具</a>
                <a href="#about" class="text-gray-600 hover:text-primary transition-colors">关于</a>
                <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-moon-o text-gray-600"></i>
                </button>
            </nav>
            <button class="md:hidden text-gray-600" id="mobileMenuBtn">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#features" class="py-2 text-gray-600 hover:text-primary transition-colors">功能</a>
                <a href="#tools" class="py-2 text-gray-600 hover:text-primary transition-colors">工具</a>
                <a href="#about" class="py-2 text-gray-600 hover:text-primary transition-colors">关于</a>
                <button id="mobileThemeToggle" class="py-2 text-left text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-moon-o mr-2"></i>切换主题
                </button>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="bg-gradient-to-br from-primary to-secondary text-white py-16 md:py-24">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-6 leading-tight text-shadow">
                    智能导航国际组织生态
                </h1>
                <p class="text-[clamp(1rem,2vw,1.25rem)] mb-8 text-white/90">
                    专业的国际组织分析与合作支持平台，助力您在全球治理与国际合作中把握机遇
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#tools" class="bg-white text-primary font-semibold py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
                        立即使用 <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                    <a href="#features" class="bg-transparent border-2 border-white text-white font-semibold py-3 px-8 rounded-lg hover:bg-white/10 transition-all">
                        了解更多
                    </a>
                </div>
            </div>
        </div>
        <!-- 波浪装饰 -->
        <div class="absolute left-0 right-0 bottom-0">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" class="w-full h-auto">
                <path fill="#f9fafb" fill-opacity="1" d="M0,64L60,69.3C120,75,240,85,360,80C480,75,600,53,720,48C840,43,960,53,1080,58.7C1200,64,1320,64,1380,64L1440,64L1440,100L1380,100C1320,100,1200,100,1080,100C960,100,840,100,720,100C600,100,480,100,360,100C240,100,120,100,60,100L0,100Z"></path>
            </svg>
        </div>
    </section>

    <!-- 功能特点 -->
    <section id="features" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">强大功能，助力国际合作</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">我们的智能助手整合了文心一言4.5的强大能力，为您提供全方位的国际组织相关支持</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- 功能卡片1 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-building-o text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">国际组织深度分析</h3>
                    <p class="text-gray-600">
                        提供全球主要国际组织的详细分析，包括组织结构、政策解读、项目动态和成员信息，助您全面了解国际组织生态。
                    </p>
                </div>
                
                <!-- 功能卡片2 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-handshake-o text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">合作提案生成</h3>
                    <p class="text-gray-600">
                        根据您的组织特点和合作目标，智能生成与国际组织合作的专业提案框架，提高合作成功率。
                    </p>
                </div>
                
                <!-- 功能卡片3 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-language text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">多语言专业翻译</h3>
                    <p class="text-gray-600">
                        精准翻译国际组织官方文件，支持多种语言，特别优化法律、外交和技术类文档的专业术语翻译。
                    </p>
                </div>
            </div>
            
            <div class="mt-16 text-center">
                <div class="inline-flex items-center bg-primary/10 text-primary px-6 py-3 rounded-full">
                    <i class="fa fa-lightbulb-o mr-2"></i>
                    <p class="font-medium">利用文心一言4.5的多语言处理和专业知识，提供精准、可靠的国际组织相关支持</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 工具区域 -->
    <section id="tools" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">智能工具集</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">选择适合您需求的工具，开始体验智能国际组织支持服务</p>
            </div>
            
            <!-- 工具选项卡 -->
            <div class="max-w-5xl mx-auto">
                <div class="border-b border-gray-200 mb-6">
                    <div class="flex flex-wrap -mb-px" id="toolTabs">
                        <button class="tool-tab active py-4 px-6 font-medium text-primary border-b-2 border-primary" data-tab="analysis">
                            <i class="fa fa-bar-chart mr-2"></i>组织分析
                        </button>
                        <button class="tool-tab py-4 px-6 font-medium text-gray-500 hover:text-primary" data-tab="proposal">
                            <i class="fa fa-file-text-o mr-2"></i>合作提案
                        </button>
                        <button class="tool-tab py-4 px-6 font-medium text-gray-500 hover:text-primary" data-tab="translation">
                            <i class="fa fa-language mr-2"></i>文件翻译
                        </button>
                    </div>
                </div>
                
                <!-- 分析工具 -->
                <div class="tool-content active" id="analysisContent">
                    <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
                        <h3 class="text-xl font-semibold mb-4">国际组织分析工具</h3>
                        <p class="text-gray-600 mb-6">获取关于国际组织的专业分析、政策解读和最新动态</p>
                        
                        <form id="analysisForm" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="organization" class="block text-sm font-medium text-gray-700 mb-1">国际组织</label>
                                    <select id="organization" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                        <option value="联合国 (UN)">联合国 (UN)</option>
                                        <option value="世界卫生组织 (WHO)">世界卫生组织 (WHO)</option>
                                        <option value="国际红十字会与红新月会联合会 (IFRC)">国际红十字会与红新月会联合会 (IFRC)</option>
                                        <option value="世界银行 (World Bank)">世界银行 (World Bank)</option>
                                        <option value="国际货币基金组织 (IMF)">国际货币基金组织 (IMF)</option>
                                        <option value="世界贸易组织 (WTO)">世界贸易组织 (WTO)</option>
                                        <option value="国际奥委会 (IOC)">国际奥委会 (IOC)</option>
                                        <option value="国际劳工组织 (ILO)">国际劳工组织 (ILO)</option>
                                        <option value="联合国教科文组织 (UNESCO)">联合国教科文组织 (UNESCO)</option>
                                        <option value="北约 (NATO)">北约 (NATO)</option>
                                        <option value="欧盟 (EU)">欧盟 (EU)</option>
                                        <option value="东盟 (ASEAN)">东盟 (ASEAN)</option>
                                        <option value="非洲联盟 (AU)">非洲联盟 (AU)</option>
                                        <option value="亚太经合组织 (APEC)">亚太经合组织 (APEC)</option>
                                        <option value="上海合作组织 (SCO)">上海合作组织 (SCO)</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label for="queryType" class="block text-sm font-medium text-gray-700 mb-1">查询类型</label>
                                    <select id="queryType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                        <option value="organization_profile">组织概况</option>
                                        <option value="policy_analysis">政策分析</option>
                                        <option value="membership">成员资格</option>
                                        <option value="funding">资金机制</option>
                                        <option value="projects">项目信息</option>
                                        <option value="cooperation">合作途径</option>
                                        <option value="news_analysis">动态分析</option>
                                        <option value="custom">自定义问题</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label for="analysisLanguage" class="block text-sm font-medium text-gray-700 mb-1">输出语言</label>
                                    <select id="analysisLanguage" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                        <option value="中文">中文</option>
                                        <option value="英语">英语</option>
                                        <option value="法语">法语</option>
                                        <option value="西班牙语">西班牙语</option>
                                        <option value="俄语">俄语</option>
                                        <option value="阿拉伯语">阿拉伯语</option>
                                        <option value="葡萄牙语">葡萄牙语</option>
                                        <option value="德语">德语</option>
                                        <option value="日语">日语</option>
                                        <option value="韩语">韩语</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div>
                                <label for="analysisContext" class="block text-sm font-medium text-gray-700 mb-1">问题背景 (可选)</label>
                                <textarea id="analysisContext" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请描述相关背景信息，帮助获得更精准的回答"></textarea>
                            </div>
                            
                            <div>
                                <label for="specificQuestion" class="block text-sm font-medium text-gray-700 mb-1">具体问题</label>
                                <textarea id="specificQuestion" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您想了解的具体问题" required></textarea>
                            </div>
                            
                            <div class="flex justify-end">
                                <button type="submit" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-colors flex items-center">
                                    <i class="fa fa-search mr-2"></i>生成分析
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 结果区域 -->
                    <div id="analysisResult" class="mt-8 hidden">
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                                <h4 class="font-semibold">分析结果</h4>
                                <button id="copyAnalysisResult" class="text-primary hover:text-primary/80 text-sm flex items-center">
                                    <i class="fa fa-copy mr-1"></i> 复制结果
                                </button>
                            </div>
                            <div id="analysisResultContent" class="p-6 prose max-w-none">
                                <!-- 结果将在这里显示 -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- 加载状态 -->
                    <div id="analysisLoading" class="mt-8 hidden">
                        <div class="bg-gray-50 rounded-xl p-8 text-center">
                            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-4"></div>
                            <p class="text-gray-600">正在生成分析结果，请稍候...</p>
                        </div>
                    </div>
                    
                    <!-- 错误状态 -->
                    <div id="analysisError" class="mt-8 hidden">
                        <div class="bg-red-50 border border-red-100 rounded-xl p-6">
                            <div class="flex items-start">
                                <i class="fa fa-exclamation-circle text-red-500 mt-1 mr-3"></i>
                                <div>
                                    <h4 class="font-semibold text-red-800 mb-1">操作失败</h4>
                                    <p id="analysisErrorMessage" class="text-red-700">发生错误，请重试</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 合作提案工具 -->
                <div class="tool-content hidden" id="proposalContent">
                    <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
                        <h3 class="text-xl font-semibold mb-4">合作提案生成工具</h3>
                        <p class="text-gray-600 mb-6">生成与国际组织合作的专业提案框架</p>
                        
                        <form id="proposalForm" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="coopOrganization" class="block text-sm font-medium text-gray-700 mb-1">目标国际组织</label>
                                    <select id="coopOrganization" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                        <option value="联合国 (UN)">联合国 (UN)</option>
                                        <option value="世界卫生组织 (WHO)">世界卫生组织 (WHO)</option>
                                        <option value="国际红十字会与红新月会联合会 (IFRC)">国际红十字会与红新月会联合会 (IFRC)</option>
                                        <option value="世界银行 (World Bank)">世界银行 (World Bank)</option>
                                        <option value="国际货币基金组织 (IMF)">国际货币基金组织 (IMF)</option>
                                        <option value="世界贸易组织 (WTO)">世界贸易组织 (WTO)</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label for="entityType" class="block text-sm font-medium text-gray-700 mb-1">实体类型</label>
                                    <select id="entityType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                        <option value="政府机构">政府机构</option>
                                        <option value="非政府组织">非政府组织</option>
                                        <option value="企业">企业</option>
                                        <option value="学术机构">学术机构</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label for="entityName" class="block text-sm font-medium text-gray-700 mb-1">实体名称</label>
                                    <input type="text" id="entityName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的组织/机构名称" required>
                                </div>
                                
                                <div>
                                    <label for="proposalLanguage" class="block text-sm font-medium text-gray-700 mb-1">提案语言</label>
                                    <select id="proposalLanguage" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                        <option value="中文">中文</option>
                                        <option value="英语">英语</option>
                                        <option value="法语">法语</option>
                                        <option value="西班牙语">西班牙语</option>
                                        <option value="俄语">俄语</option>
                                        <option value="阿拉伯语">阿拉伯语</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div>
                                <label for="coopObjectives" class="block text-sm font-medium text-gray-700 mb-1">合作目标</label>
                                <textarea id="coopObjectives" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请描述您希望通过合作实现的目标" required></textarea>
                            </div>
                            
                            <div>
                                <label for="coopResources" class="block text-sm font-medium text-gray-700 mb-1">可提供资源</label>
                                <textarea id="coopResources" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请描述您可以提供的资源（资金、人力、技术等）" required></textarea>
                            </div>
                            
                            <div class="flex justify-end">
                                <button type="submit" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-colors flex items-center">
                                    <i class="fa fa-file-text-o mr-2"></i>生成提案框架
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 结果区域 -->
                    <div id="proposalResult" class="mt-8 hidden">
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                                <h4 class="font-semibold">合作提案框架</h4>
                                <button id="copyProposalResult" class="text-primary hover:text-primary/80 text-sm flex items-center">
                                    <i class="fa fa-copy mr-1"></i> 复制结果
                                </button>
                            </div>
                            <div id="proposalResultContent" class="p-6 prose max-w-none">
                                <!-- 结果将在这里显示 -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- 加载状态 -->
                    <div id="proposalLoading" class="mt-8 hidden">
                        <div class="bg-gray-50 rounded-xl p-8 text-center">
                            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-4"></div>
                            <p class="text-gray-600">正在生成提案框架，请稍候...</p>
                        </div>
                    </div>
                    
                    <!-- 错误状态 -->
                    <div id="proposalError" class="mt-8 hidden">
                        <div class="bg-red-50 border border-red-100 rounded-xl p-6">
                            <div class="flex items-start">
                                <i class="fa fa-exclamation-circle text-red-500 mt-1 mr-3"></i>
                                <div>
                                    <h4 class="font-semibold text-red-800 mb-1">操作失败</h4>
                                    <p id="proposalErrorMessage" class="text-red-700">发生错误，请重试</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 翻译工具 -->
                <div class="tool-content hidden" id="translationContent">
                    <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
                        <h3 class="text-xl font-semibold mb-4">官方文件翻译工具</h3>
                        <p class="text-gray-600 mb-6">专业翻译国际组织官方文件，保持术语准确和文体规范</p>
                        
                        <form id="translationForm" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <div>
                                    <label for="sourceLanguage" class="block text-sm font-medium text-gray-700 mb-1">源语言</label>
                                    <select id="sourceLanguage" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                        <option value="英语">英语</option>
                                        <option value="中文">中文</option>
                                        <option value="法语">法语</option>
                                        <option value="西班牙语">西班牙语</option>
                                        <option value="俄语">俄语</option>
                                        <option value="阿拉伯语">阿拉伯语</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label for="targetLanguage" class="block text-sm font-medium text-gray-700 mb-1">目标语言</label>
                                    <select id="targetLanguage" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                        <option value="中文">中文</option>
                                        <option value="英语">英语</option>
                                        <option value="法语">法语</option>
                                        <option value="西班牙语">西班牙语</option>
                                        <option value="俄语">俄语</option>
                                        <option value="阿拉伯语">阿拉伯语</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label for="docDomain" class="block text-sm font-medium text-gray-700 mb-1">文件领域</label>
                                    <select id="docDomain" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                        <option value="general">通用文件</option>
                                        <option value="legal">法律文件</option>
                                        <option value="technical">技术文件</option>
                                        <option value="diplomatic">外交文件</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div>
                                <label for="translationContent" class="block text-sm font-medium text-gray-700 mb-1">需要翻译的内容</label>
                                <textarea id="translationContent" rows="6" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入或粘贴需要翻译的文本" required></textarea>
                            </div>
                            
                            <div class="flex justify-end">
                                <button type="submit" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-colors flex items-center">
                                    <i class="fa fa-language mr-2"></i>翻译
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 结果区域 -->
                    <div id="translationResult" class="mt-8 hidden">
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                                <h4 class="font-semibold">翻译结果</h4>
                                <button id="copyTranslationResult" class="text-primary hover:text-primary/80 text-sm flex items-center">
                                    <i class="fa fa-copy mr-1"></i> 复制结果
                                </button>
                            </div>
                            <div id="translationResultContent" class="p-6">
                                <textarea id="translatedText" class="w-full h-64 p-4 border border-gray-200 rounded-lg bg-gray-50" readonly></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 加载状态 -->
                    <div id="translationLoading" class="mt-8 hidden">
                        <div class="bg-gray-50 rounded-xl p-8 text-center">
                            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-4"></div>
                            <p class="text-gray-600">正在翻译，请稍候...</p>
                        </div>
                    </div>
                    
                    <!-- 错误状态 -->
                    <div id="translationError" class="mt-8 hidden">
                        <div class="bg-red-50 border border-red-100 rounded-xl p-6">
                            <div class="flex items-start">
                                <i class="fa fa-exclamation-circle text-red-500 mt-1 mr-3"></i>
                                <div>
                                    <h4 class="font-semibold text-red-800 mb-1">操作失败</h4>
                                    <p id="translationErrorMessage" class="text-red-700">发生错误，请重试</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于部分 -->
    <section id="about" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-center">关于 GlobalOrg Navigator</h2>
                
                <div class="bg-white rounded-xl shadow-sm p-8">
                    <h3 class="text-xl font-semibold mb-4">我们的使命</h3>
                    <p class="text-gray-600 mb-6">
                        GlobalOrg Navigator 旨在通过人工智能技术，降低国际组织参与门槛，促进更广泛、更有效的国际合作，
                        助力全球治理和可持续发展目标的实现。
                    </p>
                    
                    <h3 class="text-xl font-semibold mb-4">技术优势</h3>
                    <p class="text-gray-600 mb-6">
                        本应用基于文心一言4.5大语言模型开发，充分利用其强大的多语言处理能力、专业知识储备和逻辑推理能力，
                        为用户提供精准、可靠的国际组织相关支持。
                    </p>
                    
                    <h3 class="text-xl font-semibold mb-4">使用须知</h3>
                    <ul class="text-gray-600 space-y-2 mb-6">
                        <li class="flex items-start">
                            <i class="fa fa-info-circle text-primary mt-1 mr-2"></i>
                            <span>本工具提供的分析和建议仅供参考，重要决策请咨询相关领域专家</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-info-circle text-primary mt-1 mr-2"></i>
                            <span>翻译结果可能存在细微差异，正式使用前请由专业翻译人员审核</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-info-circle text-primary mt-1 mr-2"></i>
                            <span>数据和分析基于公开信息和AI模型训练数据，如有变动请以官方发布为准</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-globe text-accent text-2xl"></i>
                        <h3 class="text-xl font-bold">GlobalOrg Navigator</h3>
                    </div>
                    <p class="text-gray-400 mb-4">
                        智能导航国际组织生态，助力全球合作与治理
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#features" class="text-gray-400 hover:text-white transition-colors">功能特点</a></li>
                        <li><a href="#tools" class="text-gray-400 hover:text-white transition-colors">智能工具集</a></li>
                        <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-envelope text-gray-400 mt-1 mr-3"></i>
                            <span class="text-gray-400">contact@globalorgnavigator.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone text-gray-400 mt-1 mr-3"></i>
                            <span class="text-gray-400">+1 (123) 456-7890</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>&copy; 2025 GlobalOrg Navigator. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 选项卡切换
        document.querySelectorAll('.tool-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有活动状态
                document.querySelectorAll('.tool-tab').forEach(t => {
                    t.classList.remove('active', 'text-primary', 'border-b-2', 'border-primary');
                    t.classList.add('text-gray-500');
                });
                
                // 添加当前活动状态
                tab.classList.add('active', 'text-primary', 'border-b-2', 'border-primary');
                tab.classList.remove('text-gray-500');
                
                // 隐藏所有内容
                document.querySelectorAll('.tool-content').forEach(content => {
                    content.classList.add('hidden');
                    content.classList.remove('active');
                });
                
                // 显示当前内容
                const tabId = tab.getAttribute('data-tab');
                document.getElementById(`${tabId}Content`).classList.remove('hidden');
                document.getElementById(`${tabId}Content`).classList.add('active');
            });
        });
        
        // 移动端菜单切换
        document.getElementById('mobileMenuBtn').addEventListener('click', () => {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 主题切换功能
        function toggleTheme() {
            document.body.classList.toggle('dark-mode');
            const isDark = document.body.classList.contains('dark-mode');
            
            // 更新图标
            const icon = document.querySelector('#themeToggle i');
            if (isDark) {
                icon.classList.remove('fa-moon-o');
                icon.classList.add('fa-sun-o');
            } else {
                icon.classList.remove('fa-sun-o');
                icon.classList.add('fa-moon-o');
            }
            
            // 可以在这里添加更多的主题切换逻辑
        }
        
        document.getElementById('themeToggle').addEventListener('click', toggleTheme);
        document.getElementById('mobileThemeToggle').addEventListener('click', toggleTheme);
        
        // 分析表单提交
        document.getElementById('analysisForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 隐藏结果和错误，显示加载
            document.getElementById('analysisResult').classList.add('hidden');
            document.getElementById('analysisError').classList.add('hidden');
            document.getElementById('analysisLoading').classList.remove('hidden');
            
            // 收集表单数据
            const data = {
                organization: document.getElementById('organization').value,
                query_type: document.getElementById('queryType').value,
                specific_question: document.getElementById('specificQuestion').value,
                language: document.getElementById('analysisLanguage').value,
                context: document.getElementById('analysisContext').value
            };
            
            try {
                // 发送请求
                const response = await fetch('/api/analyze-organization', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (response.ok && result.success) {
                    // 显示结果
                    document.getElementById('analysisResultContent').innerHTML = result.result;
                    document.getElementById('analysisLoading').classList.add('hidden');
                    document.getElementById('analysisResult').classList.remove('hidden');
                } else {
                    // 显示错误
                    throw new Error(result.error || '获取分析结果失败');
                }
            } catch (error) {
                console.error('分析错误:', error);
                document.getElementById('analysisErrorMessage').textContent = error.message;
                document.getElementById('analysisLoading').classList.add('hidden');
                document.getElementById('analysisError').classList.remove('hidden');
            }
        });
        
        // 合作提案表单提交
        document.getElementById('proposalForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 隐藏结果和错误，显示加载
            document.getElementById('proposalResult').classList.add('hidden');
            document.getElementById('proposalError').classList.add('hidden');
            document.getElementById('proposalLoading').classList.remove('hidden');
            
            // 收集表单数据
            const data = {
                organization: document.getElementById('coopOrganization').value,
                entity_type: document.getElementById('entityType').value,
                entity_name: document.getElementById('entityName').value,
                objectives: document.getElementById('coopObjectives').value,
                resources: document.getElementById('coopResources').value,
                language: document.getElementById('proposalLanguage').value
            };
            
            try {
                // 发送请求
                const response = await fetch('/api/generate-proposal', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (response.ok && result.success) {
                    // 显示结果
                    document.getElementById('proposalResultContent').innerHTML = result.result;
                    document.getElementById('proposalLoading').classList.add('hidden');
                    document.getElementById('proposalResult').classList.remove('hidden');
                } else {
                    // 显示错误
                    throw new Error(result.error || '生成提案失败');
                }
            } catch (error) {
                console.error('提案生成错误:', error);
                document.getElementById('proposalErrorMessage').textContent = error.message;
                document.getElementById('proposalLoading').classList.add('hidden');
                document.getElementById('proposalError').classList.remove('hidden');
            }
        });
        
        // 翻译表单提交
        document.getElementById('translationForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 隐藏结果和错误，显示加载
            document.getElementById('translationResult').classList.add('hidden');
            document.getElementById('translationError').classList.add('hidden');
            document.getElementById('translationLoading').classList.remove('hidden');
            
            // 收集表单数据
            const data = {
                content: document.getElementById('translationContent').value,
                source_language: document.getElementById('sourceLanguage').value,
                target_language: document.getElementById('targetLanguage').value,
                domain: document.getElementById('docDomain').value
            };
            
            try {
                // 发送请求
                const response = await fetch('/api/translate-document', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (response.ok && result.success) {
                    // 显示结果
                    document.getElementById('translatedText').value = result.result;
                    document.getElementById('translationLoading').classList.add('hidden');
                    document.getElementById('translationResult').classList.remove('hidden');
                } else {
                    // 显示错误
                    throw new Error(result.error || '翻译失败');
                }
            } catch (error) {
                console.error('翻译错误:', error);
                document.getElementById('translationErrorMessage').textContent = error.message;
                document.getElementById('translationLoading').classList.add('hidden');
                document.getElementById('translationError').classList.remove('hidden');
            }
        });
        
        // 复制结果功能
        document.getElementById('copyAnalysisResult').addEventListener('click', () => {
            const text = document.getElementById('analysisResultContent').innerText;
            navigator.clipboard.writeText(text).then(() => {
                alert('分析结果已复制到剪贴板');
            });
        });
        
        document.getElementById('copyProposalResult').addEventListener('click', () => {
            const text = document.getElementById('proposalResultContent').innerText;
            navigator.clipboard.writeText(text).then(() => {
                alert('提案框架已复制到剪贴板');
            });
        });
        
        document.getElementById('copyTranslationResult').addEventListener('click', () => {
            const text = document.getElementById('translatedText').value;
            navigator.clipboard.writeText(text).then(() => {
                alert('翻译结果已复制到剪贴板');
            });
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动菜单（如果打开）
                    document.getElementById('mobileMenu').classList.add('hidden');
                }
            });
        });
    </script>
</body>
</html>
